<template>
  <div class="person_management">

    <div class="person_m">
      <h2>
        <span class="historytitle">历史投放记录</span>
        <i class="iconfont icon-guanbi" @click="closePersonManage"></i>
      </h2>
      <span class="allweight">重量：{{this.person.allweight}}</span>
      <div class="top_boxone">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="社区：">
            <el-select v-model="person.community" placeholder="社区" @change="communitychange">
              <el-option
                v-for="item in person.COMMUNITYList"
                :key="item.COMMUNITY_ID"
                :label="item.COMMUNITY_NAME"
                :value="item.COMMUNITY_NAME"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="小区：">
            <el-select v-model="person.village" placeholder="小区" @change="villagechange">
              <el-option
                v-for="item in person.VILLAGEList"
                :key="item.VILLAGE_ID"
                :label="item.VILLAGE_NAME"
                :value="item.VILLAGE_NAME"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="垃圾桶：">
            <el-select v-model="person.boxname" placeholder="垃圾桶">
              <el-option
                v-for="item in person.BoxList"
                :key="item.ID"
                :label="item.ID"
                :value="item.ID"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="时间：">
            <el-date-picker v-model="person.timet"></el-date-picker>
          </el-form-item>
          <el-form-item label="类型：">
            <el-select v-model="person.type" placeholder="类型">
              <el-option
                v-for="item in person.tableDatatype"
                :key="item.id"
                :label="item.NAME"
                :value="item.NAME"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary" @click="personQuery">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deletePerson">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="person_content">
        <!-- 人员管理列表 -->
        <el-table
          :data="person.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="person.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-dblclick="editPerson"
        >
          <el-table-column sortable prop="WEIGHT_ID" label="序号" align="center" width="70"></el-table-column>
          <el-table-column prop="COMMUNITY_NAME" label="社区" align="center" width="90"></el-table-column>
          <el-table-column prop="VILLAGE_NAME" label="小区" align="center" width="90"></el-table-column>
          <el-table-column prop="BUILDING" label="楼号" align="center" width="90"></el-table-column>
          <el-table-column prop="NAME" label="户主" align="center" width="90"></el-table-column>
          <el-table-column prop="WEIGHT" label="投放重量" align="center" width="90"></el-table-column>
          <el-table-column sortable prop="TYPE_NAME" label="投放种类" align="center" width="100"></el-table-column>
          <el-table-column sortable prop="RUBBISH_NAME" label="垃圾名称" align="center" width="100"></el-table-column>
          <el-table-column sortable prop="WEIGHT_TIME" label="投放时间" align="center" width="120"></el-table-column>
        </el-table>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data () {
    return { 
      person: {
        show: false,
        allweight: '',
        name: '',
        client: '',
        type: '',
        community:'',
        village:'',
        boxname:'',
        timet:'',
        COMMUNITYList: [],
        VILLAGEList: [],
        VILLAGEListALL: [],
        BoxList: [],
        BoxListALL: [],
        dataList: [],
        dataListALL: [],
        tableDatatype: [{
                id: '0',
                NAME: '全部'
                },{
                id: '1',
                NAME: '可回收垃圾'
                }, {
                date: '2',
                NAME: '厨余垃圾'
                }, {
                date: '3',
                NAME: '有害垃圾'
                }, {
                date: '4',
                NAME: '其他垃圾'
                }],
        listShow: true
      },
      editPersonShow: false,
      rules: {
        Name: [{ required: true, validator: this.checkName, message: this.errorMessage, trigger: 'blur' }],
        Phone: [{ required: true, validator: this.checkPhone, message: this.errorMessage, trigger: 'blur' }],
        Sex: [{ required: true, message: ' ', trigger: 'blur' }],
        WorkType: [{ required: true, message: ' ', trigger: 'blur' }],
        ClientNo: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      errorMessage: ' ',
      personVID: '',

    }
  },
  methods: {

    // 打开人员管理
    personManage () {
      this.person.show = true
      this.getPersonList()
    },
    personManageout (id) {
      this.person.show = true
      this.getPersonList()
    },
    // 关闭人员管理
    closePersonManage () {
      this.person.show = false
      this.newPersonForm.show = false
      this.person.listShow = true
    },
    // 称重列表
    async getPersonList () {
      this.$axios({
          //url: 'http://111.160.78.62:5575/GarbagePointsTYApi/Statistics/GetWeightHistoriesApi',
          url: this.$surl+ '/GetWeightHistoriesApi',
          method: 'get'
        }).then((res) => {
          this.person.dataListALL = res.data;
          this.person.dataList = res.data;

          var aweight=0;
          this.person.dataList.forEach(item => {
            aweight=aweight+Number(item.WEIGHT);
          })
          this.person.allweight=aweight;
          
        }).catch((error) => {

        })

      this.$axios({
          //url: 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetCommunityListApi',
          url: this.$url+ '/GetCommunityListApi',
          method: 'get'
        }).then((res) => {
          this.person.COMMUNITYList = res.data;
        }).catch((error) => {

        })

      this.$axios({
          //url: 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/GetVillageListApi',
          url: this.$url+ '/GetVillageListApi',
          method: 'get'
        }).then((res) => {
          this.person.VILLAGEListALL = res.data;
          this.person.VILLAGEList = res.data;
        }).catch((error) => {

        })
      this.$axios({
          //url: 'http://111.160.78.62:5575/GarbagePointsTYApi/BasicData/RubbishBoxApi?VillageNo=&PeopleID=',
          url: this.$url+ '/RubbishBoxApi?VillageNo=&PeopleID=',
          method: 'get'
        }).then((res) => {
          this.person.BoxListALL = res.data;
          this.person.BoxList = res.data;
        }).catch((error) => {

        })
    },

    // 称重查询
    personQuery () {
      const { community,village,boxname,timet,type } = this.person
      if (type=='全部') this.person.dataList = this.person.dataListALL
      else if (type) this.person.dataList = this.person.dataListALL.filter(item => item.TYPE_NAME.includes(type))
      else this.person.dataList = this.person.dataListALL
      if (community) this.person.dataList = this.person.dataList.filter(item => item.COMMUNITY_NAME.includes(community))
      if (village) this.person.dataList = this.person.dataList.filter(item => item.VILLAGE_NAME.includes(village))
      if (boxname) this.person.dataList = this.person.dataList.filter(item => item.ID.includes(boxname))
      let date = timet; 
      let date_value = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
      if (date_value.toString()) this.person.dataList = this.person.dataList.filter(item => item.WEIGHT_TIME.toString().includes(date_value.toString().trim()))
      var aweight=0;
      this.person.dataList.forEach(item => {
        aweight=aweight+item.WEIGHT;
      })
      this.person.allweight=aweight;
    },
    async addPerson (formName) {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const { data } = await this.$Http.get('/DataListCompany/AddWorkerApi', { params: this.newPersonForm })
      if (data.Message) {
        this.$message({
          message: data.Message,
          type: 'warning'
        })
        return false
      }
      this.newPersonForm.show = false
      this.person.listShow = true
      this.getPersonList()
    },
    async deletePerson () {
      await this.$Http.get(`/DataListCompany/DeleteWorkerApi?VID=${this.personVID}`)
    },

    communitychange(value) {
      this.person.VILLAGEList = this.person.VILLAGEListALL.filter(item => item.COMMUNITY_NAME.includes(value))
    },

    villagechange(value) {
      var villid;
      this.person.VILLAGEListALL.forEach(item => {
        if(item.VILLAGE_NAME==value){
          villid=item.VILLAGE_ID;
        }
      })

      this.person.BoxList = this.person.BoxListALL.filter(item => item.VILLAGE_NO.includes(villid))
    },
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
  }

}
</script>

<style scoped>
.person_management {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px ;
  position: relative;
  text-align: center;
  border-right: 2px solid #3baefa;
  cursor: default;
}

.top_box {
  height: 30px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.top_boxone {
  height: 70px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.historytitle{
  margin-bottom: 10px;
  padding-bottom: 10px;
  color: #3baefa;
}
</style>
